<template>
	<div class="hoves">
		<div class="main">
			<h1 class="title">{{job.details.job}}</h1>
			<p class="salary">{{job.details.salary}}</p>
			<p class="address">
				<span><van-icon name="location-o" />{{job.details.address}}</span>
			</p>
			<div class="enter" @click="toEnterprise(job.enterprise.id)">
				<van-image
					round
					fit="cover"
					width="10rem"
					height="10rem"
					:src="job.details.avatar"
					/>
				<div class="text">
					<p class="tit">{{job.enterprise.name}}</p>
					<p class="subtit">{{job.enterprise.manage}}</p>
				</div>
				<van-icon class="icon-fr" name="arrow" />
			</div>
			<div class="details">
				职位详情：
				<p class="tap">
					<span class="label-item">{{job.details.education}}</span>
					<span class="label-item">{{job.details.experience}}</span>
				</p>
				<p class="remark">{{job.details.description}}</p>
			</div>
			<p style="font-size:1rem;line-height:2rem;">公司地址：</p>
			
			<baidu-map center="广州"  @ready="handler"></baidu-map>
			<div id="map" class="bm-view"></div>
		</div>
		<div class="btn">
			<van-button size="small" type="warning">投简历</van-button>
			<van-button size="small" type="primary" :to="{ path: 'chat', query: { enterprise: job.details.eid ,name:job.details.name}}">立即沟通</van-button>
		</div>
	</div>
</template>

<script setup>
	import { ref, reactive,computed, getCurrentInstance,watch,onMounted,onUpdated} from 'vue'
	import { getJobDetails } from '../../api/home.js'
	import { useStore } from 'vuex'
	import { useRoute } from 'vue-router'

	const { proxy } = getCurrentInstance()
	const _this = proxy;
	const route = useRoute()
	let card_id = route.query.id

	const job = reactive({
		details:{
			address: "广州",
			avatar: "",
			company_profile: null,
			description: "",
			education: "",
			experience: "",
			id: 0,
			industry: "",
			job: "",
			name: "",
			number: "",
			release_time: null,
			salary: "",
			username: "",
			valid_time: null,
		},
		enterprise: {
			id: 0,
			username: '',
			name: '', 
			email: '', 
			phone: '',
			address:'',
			createTime:'',
			intro:'',
			manage:''
		},
	})
	let address = ref('广州')
	const toEnterprise = (id)=>{
		console.log(id)
	}

	function handler({ BMap, map }) {
		// console.log(BMap)
		// console.log(map)
		const mm = new BMap.Map('map');
		// console.log(mm)
      	mm.centerAndZoom(job.details.address)
	}

	onMounted( async ()=>{
		let job1 = await getJobDetails({id:card_id})
		job.details = job1.data
		job.enterprise = job1.data.enterpriseList
		address.value = job1.data.address
	})
</script>

<style scoped lang="scss">
	.hoves{
		padding: 0 1rem;
		.btn{
			position: fixed;bottom: 0;left: 0; width: 100%;padding: 0.7rem 0;box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);z-index: 999;
			display: flex;justify-content: space-evenly;align-items: center;
			.van-button{
				&:nth-of-type(1){padding: 0 2rem;}
				&:nth-of-type(2){padding: 0 4rem;}
			}
		}
		.main{
			.title{font-size: 1.25rem;font-weight: bold;line-height: 2;}
			.salary{font-size: 1rem;font-weight: bold; color: var(--van-primary-color);line-height: 2;}
			.address{}
			.enter{
				margin: 0.5rem 0;display:flex;border:0.01rem solid rgb(240, 240, 240);padding: 1rem 0;border-left:0;border-right:0;position: relative;align-items: center;justify-content: space-between;
				&:active{background: #fafafa;}
				.van-image{width: 3rem !important;height: 3rem !important;margin-right: 1rem;}
				.text{width: 19rem;}
				.tit{font-size: 1rem;font-weight: bold;}
				.subtit{font-size: 0.8rem;line-height: 1.5rem;}
			}
			.details{
				margin-bottom: 1rem;
				.tap{margin: 0.5rem 0;}
				.label-item{display: inline-block;background: #ececec;border-radius: 0.2rem; font-size: 0.833rem;padding: 0.2rem 0.3rem;margin-right: 0.5rem;}
				.remark{font-size: 1rem;white-space: pre-line;}
			}
			.bm-view {
				width: 100%;
				height: 200px;
				border-radius: 8px;
				overflow: hidden;
			}
		}
		.bm-view {
			width: 100%;
			height: 200px;
			border-radius: 8px;
			overflow: hidden;
		}
	}
</style>
